<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">核销 / 退款</block>
		</cu-custom>
		<view class="tabs">
			<view class="tab" :class="nowIndex==1?'active':''" @click="selectIndex(1)">
				<text>订单核销</text>
				<text v-if="nowIndex==1"></text>
			</view>
			<view class=""></view>
			<view class="tab" :class="nowIndex==2?'active':''" @click="selectIndex(2)">
				<text>核销记录</text>
				<text v-if="nowIndex==2"></text>
			</view>
		</view>
		<view class="content-all" v-if="nowIndex==1">
			<view class="he-xiao">
				<view class="title">
					<text class="bg-colorP">1</text>
					<text>输入核销码直接核销订单</text>
				</view>

				<view class="input-content">
					<input type='number' placeholder='请输入核销码' v-model='code'></input>
					<text class="bg-colorP" @click='lookType'>去核销</text>
				</view>
			</view>

			<view class="he-xiao">
				<view class="title">
					<text class="bg-colorP">2</text>
					<text>扫描二维码核销订单</text>
				</view>

				<view class="saoyisao">
					<view @click='scanCode' class="bg-colorP">
						<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/erweima.png"></image>
					</view>
				</view>
				<view class="tips">点击扫描二维码进行核销</view>
				<image class="image" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/c103376ad5d849a18e098519f46499f.png"></image>
			</view>
		</view>
		<!-- 核销记录 -->
		<view class="change-detail" v-if="nowIndex==2">
			<view class="change-item" v-for="(item,index) in thisData" :key="index" @click="nav" :data-url="`/pages/orderDetail?id=${item.order_id}`">
				<view class="shops">
					<text>{{item.name}}</text>
					<text>{{item.create_time}}</text>
				</view>
				<view class="goods">
					<view class="goods-item" v-for="(good,i) in item.product" :key="i">
						<image :src="good.image" mode=""></image>
						<view class="">
							<view>{{good.product_name}}</view>
							<view class="">
								x{{good.saleNum}}
							</view>
						</view>
					</view>
				</view>
				<view class="remark" v-if="item.home_code">
					备注:{{item.home_code}}
				</view>
				<view class="remark-btn bg-colorP" @tap.stop="addRemark(item.order_id,item.home_code)">
					备注
				</view>
			</view>
			<no-content :showType="'data'" v-if='noContentShow' :tips="'暂时没有核销过的订单~'"></no-content>
			<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了~</tui-divider>
		</view>
		<!-- 添加备注 -->
		<tui-modal :show="showConversion" @cancel="hide" :custom="true" :maskClosable="false">
			<view class="tui-modal-custom  z_d_y">
				<view class="title">
					添加核销备注
				</view>
				<input type="text" v-model="homeCode" placeholder="请填写包间号码/餐桌桌号" placeholder-class="place-holder" />
				<view class="btn">
					<text @click="hide">取消</text>
					<text @click="submit">确认</text>
				</view>
			</view>
		</tui-modal>
		<!-- 添加扣费项目 -->
		<tui-modal :show="showCost" @cancel="hideCost" :custom="true" :maskClosable="false">
			<view class="tui-modal-custom  z_d_y">
				<view class="title">
					添加扣费项
				</view>
				<input type="digit" v-model="price" placeholder="请输入扣费金额" placeholder-class="place-holder" />
				<view class="industy" v-if="costList.length>0">
					<picker @change="bindPickerChange" range-key="title" :value="costIndex" :range="costList">
						<text>扣费项：</text>
						<text>{{costList[costIndex].title}}</text>
						<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/enter.png" />
					</picker>
				</view>
				<view class="btn">
					<text @click="hideCost">取消</text>
					<text @click="submitCost">确认</text>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import tuiModal from "@/components/thorUI/modal"
	import tuiDivider from "./component/divider.vue"
	import noContent from "./component/noContent.vue"
	export default {
		components: {
			tuiDivider,
			noContent,
			tuiModal
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				code: '',
				winHeight: 0,
				nowIndex: 1,
				page: 1,
				lastPage: '',
				thisData: [],
				noMore: false,
				noContentShow: false,
				showConversion: false,

				homeCode: '',
				nowOrder: '',
				
				showCost: false,
				price:'',
				costList:[],
				costIndex: 0,
				orderParice:0
			}
		},
		onLoad() {
			var that = this
			setTimeout(() => {
				uni.getSystemInfo({
					success: function(res) {
						let winHeight = res.windowHeight
						that.winHeight = winHeight - that.CustomBar;
					}
				})
			}, 50)
			this.changeList()
		},
		onReachBottom() {
			if (this.page > this.lastPage && this.nowIndex == 2) {
				this.noMore = true
				return
			}
			this.changeList()
		},
		methods: {
			// 显示弹窗
			show(e) {
				var that = this
				this.showConversion = true
			},
			bindPickerChange(e) {
				this.costIndex = e.detail.value
			},
			// 取消
			hide() {
				// 重新获取一下列表数据
				this.page = 1
				this.lastPage = ''
				this.thisData = []
				this.showConversion = false
				this.changeList()
			},
			hideCost(){
				this.price = ''
				this.costIndex = 0
				this.showCost = false
			},
			submitCost(){
				if(this.price!='' && this.price>this.orderParice){
					uni.showToast({
						title: '超出订单金额',
						icon: 'none'
					})
					return 
				}
				this.Charge()
				this.showCost = false
				this.price = ''
				this.costIndex = 0
			},
			// 跳转
			nav(e) {
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			addRemark(id, remark) {
				var that = this
				that.nowOrder = id
				that.homeCode = remark
				that.show()
			},
			submit() {
				var that = this;
				if (that.homeCode == '') {
					uni.showToast({
						title: '请输入备注信息',
						icon: 'none'
					})
					return false
				}
				this.$request({
					url: '/OnlineOrder/add_home_code',
					data: {
						order_id: that.nowOrder,
						home_code: that.homeCode
					},
					success: res => {
						if (res.data.status == 1) {
							uni.showModal({
								content: '备注成功',
								showCancel: false
							})
							that.homeCode = ''
							that.nowOrder = ''
							that.hide()
							
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changeList() {
				var that = this;
				this.$request({
					url: '/VerificationUser/get_log_list',
					data: {
						page: that.page
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.pageCount == 1) {
								this.noMore = true
							}
							if (res.data.data.totalNum == 0) {
								this.noContentShow = true
								return
							}
							that.thisData = that.thisData.concat(res.data.data.data)
							that.page++
							that.lastPage = res.data.data.pageCount
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			selectIndex(index) {
				this.nowIndex = index
			},
			Charge() {
				var that = this;
				if (that.code == '') {
					uni.showToast({
						title: '请输入核销码',
						icon: 'none'
					})
					return false
				}
				this.$request({
					url: '/OnlineOrder/orderVerificationByCode',
					data: {
						verification_code: that.code,
						deduct_money: that.price,
						deduct_reason: that.costList.length>0?that.costList[that.costIndex].id:''
					},
					success: res => {
						if (res.data.status == 1) {
							uni.hideLoading()
							that.nowOrder = res.data.data.order_id
							if(res.data.data.is_cash==1){
								uni.showModal({
									content: res.data.message,
									showCancel:false
								})
								that.costIndex = 0
								that.showCost = false
							}else{
								that.show()
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			scanCode() {
				var that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						var path = res.result
						that.code = path
						that.lookType()
					}
				})
			},
			lookType(){
				var that = this;
				this.$request({
					url: '/OnlineOrder/get_verification_type',
					data: {
						verification_code: that.code
					},
					success: res => {
						if (res.data.status == 1) {
							if(res.data.data.is_cash==1){
								that.costList = res.data.data.deduct_type
								that.showCost = true
								that.orderParice = Number(res.data.data.pay_price)
							}else{
								that.Charge()
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	page {
		box-sizing: border-box;
		background: #f5f5f5;
	}

	.content-all {
		width: 710rpx;
		box-shadow: 0 0 10rpx #ffff;
		border-radius: 8rpx;
		padding: 0 20rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		background: #fff;
		overflow-y: scroll;
	}

	.he-xiao {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.title {
		height: 80rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.title>text:nth-child(1) {
		display: block;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 100%;
		color: #fff;
		margin-right: 10rpx;
		font-size: 24rpx;
	}

	.title>text:nth-child(2) {
		font-size: 26rpx;
		color: #333;
	}

	.input-content {
		display: flex;
		width: 100%;
		height: 70rpx;
		/* margin-top: 30rpx; */
	}

	.input-content input {
		flex: 1;
		margin-right: 30rpx;
		border-bottom: dashed 1rpx #f2f2f2;
		height: 70rpx;
		line-height: 70rpx;
		color: #333;
	}

	.input-content text {
		width: 200rpx;
		text-align: center;
		line-height: 70rpx;
		/* background: #3080e8; */
		border-radius: 8rpx;
		color: #fff;
	}

	.saoyisao {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.saoyisao view:nth-child(1) {
		width: 300rpx;
		height: 300rpx;
		box-shadow: 0px 0px 5rpx 7rpx rgba(0, 0, 0, 0.1);
		border-radius: 100%;
		/* background: #3080e8; */
		position: relative;
		margin: 30rpx 0;
	}

	.saoyisao view:nth-child(1) image {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-75rpx, -75rpx);
	}

	.tips {
		width: 100%;
		line-height: 50rpx;
		color: #999;
		text-align: center;
		font-size: 24rpx;
	}

	.image {
		width: 485rpx;
		height: 205rpx;
		margin: 30rpx auto 0;
	}

	.tabs {
		width: 100%;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center
	}

	.tabs .tab {
		flex: 1;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.tabs .tab.active>text:nth-child(1) {
		font-weight: bold;
	}

	.tabs .tab>text:nth-child(1) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.tabs .tab>text:nth-child(2) {
		width: 120rpx;
		height: 4rpx;
		background-color: #f34930;
		border-radius: 2rpx;
		display: inline-block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-60rpx);
	}

	.tabs>view:nth-child(2) {
		width: 2rpx;
		height: 50rpx;
		background-color: #efefef;
	}

	.change-detail {
		padding: 20rpx 24rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.change-item {
		width: 100%;
		background: #fff;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx #fff;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.remark {
		font-size: 26rpx;
		color: #999;
		margin: 20rpx 0;
	}

	.remark-btn {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 80rpx;
		height: 45rpx;
		line-height: 45rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
	}

	.change-item .shops {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1rpx #efefef;
	}

	.change-item .shops>text:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}

	.change-item .shops>text:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}

	.change-item .goods {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.change-item .goods .goods-item:last-child>view {
		border-bottom: 0 !important;
	}

	.change-item .goods .goods-item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.change-item .goods .goods-item image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 8rpx;
		margin-right: 25rpx;
	}

	.change-item .goods .goods-item>view {
		flex: 1;
		height: 130rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-bottom: solid 1rpx #efefef;
	}

	.change-item .goods .goods-item>view>view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}

	.change-item .goods .goods-item>view>view:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}


	.z_d_y {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.z_d_y .title {
		font-size: 32rpx;
		line-height: 60rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.z_d_y input {
		width: 520rpx;
		height: 88rpx;
		background-color: #efefef;
		border-radius: 8rpx;
		margin: 20rpx 0 30rpx;
		color: #333;
		font-size: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
		/* font-weight: bold; */
	}

	.z_d_y .place-holder {
		color: #999999;
	}

	.z_d_y .btn {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		border-top: solid 1rpx #efefef;
		align-items: center;
		box-sizing: border-box;
	}

	.z_d_y .btn text {
		flex: 1;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 30rpx;
	}

	.z_d_y .btn text:nth-child(2) {
		color: #f34930;
		border-left: solid 1rpx #efefef;
		box-sizing: border-box;
	}	
	
	.industy{
		width: 520rpx;
		height: 88rpx;
		background-color: #efefef;
		border-radius: 8rpx;
		margin: 20rpx 0;
		color: #333;
		font-size: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.industy picker {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.industy picker text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}
	
	.industy picker image {
		width: 12rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}
</style>
<style>
	.place-holder {
		color: #999999;
	}

	.tui-modal-box {
		padding: 20rpx 0 0 !important;
		border-radius: 14rpx !important;
		width: 79% !important;
	}

</style>
